import previewPicturesLess from "./previewPictures.module.less";
import { useEffect, useState } from "react";
function PreviewPictures({ Attachment }: any) {
  const [imageSizes, setImageSizes] = useState([]);
  useEffect(() => {
    const fetchImageSizes = () => {
      const sizes = Attachment.map((url: any) => {
        const img = new Image();
        img.src = url;
        return new Promise((resolve) => {
          img.onload = () => {
            resolve({ width: img.width / 4, height: img.height / 4, src: url });
          };
        });
      });

      Promise.all(sizes).then((sizes: any) => {
        setImageSizes(sizes);
      });
    };

    fetchImageSizes();
  }, [Attachment]);
  return (
    <>
      <div className={previewPicturesLess.PreviewPicturesContent}>
        {imageSizes.map((image: any) => (
          <div key={image.src} className="image-container">
            <img
              src={image.src}
              alt="Gallery"
              width={image.width}
              height={image.height}
              className="image"
            />
          </div>
        ))}
      </div>
    </>
  );
}

export default PreviewPictures;
